{extends file="assets::smarty-templates::Master"|ToPath}
{block name="content"}
<style type="text/css" >
    {literal}
    #candidates {
        list-style-type: none;
        overflow: hidden;
    }

    #candidates li {
        height: 240;
        width: 150px;
        padding: 5px;
    }

    .candidate-picture {
        height: 190px;
        text-align: center;
    }

    .candidate-picture img{
        margin: 0 auto;
    }

    .candidate-name {
        text-align: center;
        font-weight: bold;
        text-transform: capitalize;
    }

    #candidates input[type=radio]{
        display:none;
    }

    {/literal}
</style>
<h1>
    Escoge tu candidato y haz click en <em>votar</em>
</h1>
{if count($Representantes) > 0}
<form action="/acaweb/?controller=Votaciones&task=Votar" method="post" class="form-validate">
    
    <ul id="candidates" class="dash">
        {foreach $Representantes as $representante}
        <li class="fade_hover select-candidato" id="_{$representante->getCodigoRepresentante()}" title="Votar por: {$representante->getNombre()}">
            <input name="Representante" type="radio"
                   class="representante-control"
                   value="{$representante->getCodigoRepresentante()}"
                   id="{$representante->getCodigoRepresentante()}"/>

            <label for="{$representante->getCodigoRepresentante()}">
                <div class="candidate-picture">
                    <img class="candidato"
                         src="{$imgURL}{$representante->getCodigoRepresentante()}.jpg"
                         alt="Votar por: {$representante->getNombre()}"/>
                </div>

                <div class="candidate-name">
                    {$representante->getNombre()|lower}
                </div>
            </label>
        </li>
        {/foreach}
    </ul>
    <input type="submit" id="votar" value="Votar" name="Votar" class="button"/> o
    <a href="{$cancel}">Cancelar</a>
</form>
{/if}

<div id="confirm" style="display: none; text-align: center;">
    <p>Â¿Est&aacute;s seguro de votar por este candidato?</p>
    <div class="candidate-picture">
        <img id="img-confirm-candidato"
             class="candidato"
             src=""
             alt=""/>
    </div>

    <div id="confirm-candidate-name" class="candidate-name">
    </div>
</div>

<script type="text/javascript">
    var url = "{$imgURL}";
    {literal}
    jQuery.noConflict();
    jQuery(document).ready(function($){
        $(".representante-control").change(function(){
            var codigo = this.id;
            var id = "#_" + codigo;
            var nombre = $(id + " .candidate-name").text();

            var $nombre = $("#confirm-candidate-name");
            var $img = $("#img-confirm-candidato");

            $nombre.text(nombre);
            $img.attr("src", url + codigo + ".jpg");
            $img.attr("alt", nombre);
            
            $(".select-candidato").removeClass("selected");
            $(id).addClass("selected");
        });

        $("#votar").click(function(){
            $( "#confirm" ).dialog({
                resizable: false,
                modal: true,
                buttons: {
                    " Si ": function() {
                        $("form").submit();
                    },
                    " No ": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
            return false;
        });
    });
    {/literal}
</script>
{/block}